<template>
	<view class="hainan-container">
		<customImage imgSrc="/clb/clb/122/top.png"></customImage>
		<view class="money" style="text-align: center; height: 70rpx">
			<text style="text-align: center; color: #fefeff">资费：26.9/月 （合约期12个月）</text>
		</view>
		<view class="form-container">
			<uni-forms class="login-form" ref="accountForm" :model="formData" :rules="accountRules">
				<uni-forms-item>
					<inputPhone v-model="formData.mobile" ta="left" fs="36rpx"></inputPhone>
				</uni-forms-item>
				<uni-forms-item>
					<view class="send-code">
						<input
							style="width: 350rpx; font-size: 36rpx; margin-left: 50rpx; display: block; visibility: visible"
							maxlength="6" type="tel" v-model="formData.smsCode" placeholder="请输入验证码"
							class="uni-input-input" placeholder-style="color: #818181" />
						<view class="code-line"></view>
						<view class="code" style="color: #f31616; margin-left: 20rpx"
							:style="{ cursor: isSend ? 'not-allowed' : '' }" @click="sendCode">
							{{ isSend ? `重新发送 ${isNum}` : '获取验证码' }}
						</view>
					</view>
				</uni-forms-item>

				<view class="login-btn">
					<customImage imgSrc="/clb/clb/122/btn.png" width="650rpx" @click="submitform"></customImage>
				</view>

				<view
					style="margin-top: 40rpx; margin-bottom: 0rpx; padding-bottom: 0rpx; display: flex; align-items: center; justify-content: center">
					<checkbox-group @change="changeAll">
						<label>
							<checkbox value="cb" :checked="allChecked" style="transform: scale(0.7)" />
							<text style="color: #fdfdfd; font-weight: 400; font-size: 26rpx">已阅读并同意</text>
						</label>
					</checkbox-group>
					<text style="color: #ffffff; font-weight: 400; font-size: 28rpx"
						@click="privatePro(122)">《业务受理协议》</text>
				</view>

				<view class="" style="text-align: center; height: 60rpx; margin-top: 10rpx; color: #ffffff">
					<text @click="phone1">客服电话： 400-8825-101</text>
					<text>和</text>
					<text @click="phone2">10086</text>
				</view>
			</uni-forms>
		</view>

		<customImage imgSrc="/clb/clb/122/bottom.png"></customImage>
		<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0">
			<view class="confirm">
				<view class="btn-close">
					<customImage imgSrc="/clb/clb/122/sure/icom.png" width="85rpx" @click="cancel"></customImage>
				</view>
				<view class="dialog-con">
					<customImage imgSrc="/clb/clb/122/sure/tc.png" width="660rpx" @click="cancel"></customImage>
				</view>

				<view class="btn-con">
					<view class="btn-cancel">
						<customImage imgSrc="/clb/clb/122/sure/cancel.png" width="330rpx" @click="cancel"></customImage>
					</view>
					<view class="btn-ok">
						<customImage imgSrc="/clb/clb/122/sure/ok.png" width="330rpx" @click="confirmOrder">
						</customImage>
					</view>
				</view>
			</view>
		</uni-popup>

		<uni-popup ref="popupOk" type="bottom" border-radius="10px 10px 0 0">
			<view class="sure-message">
				<view class="btn-close">
					<customImage imgSrc="/clb/clb/122/sure/icom.png" width="85rpx" @click="successOk"></customImage>
				</view>
				<view class="sure-image">
					<image src="/static/clb/122/success.png" style="width: 680rpx" mode="widthFix"></image>
				</view>
				<view class="cancel-btn">
					<customImage imgSrc="/clb/clb/122/okB.png" width="280rpx" @click="successOk"></customImage>
				</view>
			</view>
		</uni-popup>

		<view class="arrive-btn" :style="{ display: showHeight > 700 ? '' : 'none' }">
			<customImage imgSrc="/clb/clb/122/btn.png" width="650rpx" @click="toTop"></customImage>
		</view>
		<view class="layout-operate">
			<view  @click="privatePro(122)">
				<image src="/static/clb/122/rule.png" style="width: 45rpx" mode="widthFix"></image>
			</view>
			<view  @click="receiveEquity">
				<image src="/static/clb/122/equity.png" style="width: 45rpx" mode="widthFix"></image>
			</view>
			<view  @click="phone">
				<image src="/static/clb/122/phone.png" style="width: 45rpx" mode="widthFix"></image>
			</view>
		</view>

		<uni-popup ref="popupPro" type="bottom" border-radius="10px 10px 0 0">
			<per-info :agreementType="agreeType" @ok="ok1"></per-info>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		nextTick,
		onMounted,
		watchEffect,
		watch
	} from 'vue';
	import {
		onLoad,
		onPageScroll
	} from '@dcloudio/uni-app';
	import initApi from '@/apis/init.js';
	const showHeight = ref(0);
	const accountForm = ref();
	const agreeType = ref(1);
	const popupPro = ref();
	// 表单数据
	const isSend = ref(false);
	const allChecked = ref();
	const isNum = ref(0);
	const isTimer = ref();
	const formData = reactive({
		mobile: '',
		smsCode: null,
		orderNo: null,
		channelCode: '',
		productCode: ''
	});
	const popup = ref();
	const popupOk = ref();
	const successOk = () => {
		popupOk.value.close();
	};
	const cancel = () => {
		popup.value.close();
	};
	const phone = () => {
		uni.makePhoneCall({
			phoneNumber: '400-8825101' //客服
		});
	};
	const phone1 = () => {
		uni.makePhoneCall({
			phoneNumber: '400-8825101' //客服
		});
	};
	const phone2 = () => {
		uni.makePhoneCall({
			phoneNumber: '10086' //客服
		});
	};
	const privatePro = (type) => {
		agreeType.value = type;
		popupPro.value.open('center');
	};
	const receiveEquity = () => {};
	const ok1 = () => {
		popupPro.value.close();
		allChecked.value = true;
	};
	const changeAll = (val) => {
		if (val.detail.value.length > 0) {
			allChecked.value = true;
		} else {
			allChecked.value = false;
		}
	};
	watch(
		() => formData.mobile,
		(newVal, oldValue) => {
			const isOkMobile = /^1[3-9][0-9]\d{8}$/.test(newVal);
			if (isOkMobile) {
				uni.hideKeyboard();
			}
		}
	);

	const accountRules = reactive({
		mobile: {
			rules: [{
					required: true,
					errorMessage: '请输入手机号码'
				},
				{
					pattern: /^1[3-9][0-9]\d{8}$/,
					errorMessage: '手机号码格式不正确'
				}
			]
		},
		code: {
			rules: [{
				required: true,
				errorMessage: '请输入手机验证码'
			}]
		}
	});
	const confirmOrder = async () => {
		try {
			const arr = {
				orderNo: formData.orderNo,
				mobile: formData.mobile,
				smsCode: formData.smsCode
			};
			const res = await initApi.processInventoryPackageOrder(arr);
			if (res.code != 20000) {
				return uni.utils.toast(res.message);
			}else if(res.code == 20000){
				popup.value.close();
			}

			nextTick(() => {
				popupOk.value.open('center');
			});
			clearInterval(isTimer.value);
			isNum.value = 0;
			isSend.value = false;
		} catch (e) {
			clearInterval(isTimer.value);
			isNum.value = 0;
			isSend.value = false;
		}
	};
	// 二次确认
	const submitform = async () => {
		if (!formData.mobile) return uni.utils.toast('请输入手机号');
		if (!formData.smsCode) return uni.utils.toast('请输入验证码');
		if (!allChecked.value) return uni.utils.toast('请阅读业务受理协议');
		// 没问题 弹出二次确认
		popup.value.open('center');
	};
	// 发送验证码
	const confirmSendCode = async () => {
		try {
			const arr = {
				mobile: formData.mobile,
				channelCode: formData.channelCode,
				productCode: formData.productCode
			};
			const isOkMobile = /^1[3-9][0-9]\d{8}$/.test(formData.mobile);
			if (!isOkMobile) {
				return uni.utils.toast('请输入正确的手机号');
			}
			const res = await initApi.initInventoryPackageOrder(arr);
			if (res.code != 20000) {
				return uni.utils.toast(res.message);
			}
			formData.orderNo = res.data.orderNo;
			isNum.value = 60;
			isSend.value = true;

			isTimer.value = setInterval(() => {
				if (isNum.value <= 0) {
					clearInterval(isTimer.value);
					isNum.value = 0;
					isSend.value = false;
				}
				isNum.value--;
			}, 1000);
			return uni.utils.toast('验证码发送成功');
		} catch (e) {
			console.log(e);
			console.log(formData.mobile);
			uni.utils.toast('请输入正确手机号');
			isSend.value = false;
			isNum.value = 0;
			clearInterval(isTimer.value);
		}
	};
	const sendCode = async () => {
		if (isSend.value) return;

		if (!formData.mobile) return uni.utils.toast('请输入手机号');
		if (!allChecked.value) return uni.utils.toast('请阅读业务受理协议');
		// 发送验证码

		confirmSendCode();
		// 如何单独校验一个数据
	};
	onLoad((query) => {
		// 怎么获取这个数据
		// if (!query.a || !query.p) {
		// 	uni.reLaunch({
		// 		url: '/pages/clb/404'
		// 	});
		// }
		formData.channelCode = query.a;
		formData.productCode = query.p;
	});
	onPageScroll((e) => {
		showHeight.value = e.scrollTop;
	});
	const toTop = () => {
		uni.pageScrollTo({
			scrollTop: 0,
			duration: 300
		});
	};
</script>

<style lang="scss" scoped>
	.arrive-btn {
		position: fixed;
		bottom: 20rpx;
		width: 750rpx;
		text-align: center;
	}

	.sure-message {
		width: 680rpx;

		.btn-close {
			margin-bottom: 35rpx;
		}

		.cancel-btn {
			text-align: center;
			margin-top: 60rpx;
		}
	}

	.btn-con {
		display: flex;
		justify-content: space-around;
		margin-top: 30rpx;
	}

	.btn-close {
		text-align: end;
	}

	.dialog-con {
		position: relative;

		.send-code {
			position: absolute;
			width: 610rpx;
			height: 70rpx;
			top: 210rpx;
			z-index: 100;
			display: flex;
			height: 80rpx;
			border: 2rpx solid #fe374f;
			margin-left: 22rpx;
			border-radius: 100rpx;
		}
	}

	.form-container {
		width: 750rpx;
		margin: 0 auto;
		margin-top: 0rpx;
		margin-bottom: -2rpx;
		padding: 0 25rpx;

		.login-btn {
			width: 650rpx;
			margin-left: 25rpx;
			animation: scaleUp 2s infinite;
			/* 动画名称、持续时间、是否无限循环 */
		}

		@keyframes scaleUp {

			0%,
			50% {
				transform: scale(1);
				/* 开始时的缩放比例 */
			}

			25%,
			75% {
				transform: scale(1.05);
				/* 缩放比例最大值 */
			}

			100% {
				transform: scale(1);
				/* 结束时的缩放比例 */
			}
		}

		.send-code {
			display: flex;
			height: 100rpx;

			.code-line {
				height: 50rpx;
				width: 2rpx;
				border-left: 2rpx #7a7a7a solid;
				margin-top: 25rpx;
				margin-right: 6rpx;
			}

			.code {
				height: 100rpx;
				width: 200rpx;
				line-height: 100rpx;
				color: #4b5ae5;
				font-size: 32rpx;
				cursor: pointer;
			}
		}

		.uni-forms-item {
			width: 700rpx;
			height: 100rpx;
			margin-bottom: 20 !important;
			border-bottom: 2rpx solid #eee;
			background-color: #ffffff;
			border-radius: 100rpx;
			box-sizing: border-box;

			.uni-input-input {
				width: 600rpx;
				margin-left: 50rpx;
			}
		}

		::v-deep .uni-forms-item__error {
			width: 100%;
			padding-top: 10rpx;
			color: #fff;
			text-align: center;
			font-size: 28rpx;
			transition: none;
		}
	}

	.hainan-container {
		width: 750rpx;
		margin: 0 auto;
		background-color: #009cff;
		box-sizing: border-box;
		overflow-x: hidden;
	}

	::v-deep {
		image {
			vertical-align: bottom; // 解决image背景图片下方有10rpx 的白边
		}
	}

	:deep(.uni-checkbox-input) {
		border-radius: 80rpx !important;
	}
</style>